 <template>
    <div>
        <navigationBar navigationTitle="我的订单" />
        <!-- <navigationBar :backType="2" navigationTitle="我的订单" /> -->

        <view
            class="wrap-order-status flex"
            :style="'top:' + navigationHeight + 'px;'"
        >
            <block v-for="(item, index) in tab_list" :key="index">
                <view
                    class="status-item flex align-center just-center"
                    @click="onTab(index)"
                >
                    <view :class="{ active: item.status === status }">
                        {{ item.title }}
                    </view>
                </view>
            </block>
        </view>

        <view class="wrap paddingBottom">
            <view class="wrap-list">
                <block v-for="(item, index) in list" :key="index">
                    <view class="item" @click="onDetail(item)">
                        <view class="item-one flex align-center just-between">
                            <view class="order-num f-26">
                                {{ item.order_sn }}
                                <text class="tags" v-if="item.is_add == 1">
                                    加钟订单
                                </text>
                                <text class="tags" v-if="item.is_upgrade == 1">
                                    升级订单
                                </text>
                            </view>
                            <view
                                class="status f-26"
                                :class="{ errC: item.status == 9 }"
                            >
                                {{ item.status_text }}
                            </view>
                        </view>

                        <view class="item-info flex align-center just-between">
                            <image
                                class="file"
                                :src="item.goods.service_cover"
                            />

                            <view class="info-right">
                                <view class="title fb-30 limit-num-line">
                                    {{ item.goods.service_name }}
                                </view>

                                <view class="people f-26">
                                    服务师: {{ item.technician.name }}
                                </view>

                                <view class="time f-26">
                                    预约时间：{{ item.strattime_text }}
                                </view>

                                <view
                                    class="service-time f-26 flex align-center just-between"
                                >
                                    <text
                                        >服务时长：{{
                                            item.time_long
                                        }}分钟</text
                                    >
                                    <text class="num f-26"
                                        >x{{ item.goods.num }}</text
                                    >
                                </view>
                            </view>
                        </view>

                        <view
                            class="item-bottom flex align-center just-between"
                        >
                            <view class="total-price">
                                <text>总计:</text>
                                <text class="price">
                                    ¥{{ item.total_price }}
                                </text>
                            </view>

                            <view class="btn-bg">
                                <orderBtn
                                    :btnType="'1'"
                                    :dataInfo="item"
                                    @onRefresh="onRefresh"
                                    @onApplyRefund="onApplyRefund"
                                />
                            </view>
                        </view>
                    </view>
                </block>
            </view>

            <uEmpty v-if="list.length === 0" />
        </view>
    </div>
</template>

<script>
import { getOrderList } from "@/API/API/order.js";
import tabBar from "@/subPages/components/technician/tabBar/tabBar.vue";
import orderBtn from "@/subPages/components/orderBtnBg/orderBtnBg.vue";
export default {
    components: {
        tabBar,
        orderBtn,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            tab_list: [
                { title: "全部订单", status: "0" },
                { title: "待支付", status: "1" },
                { title: "待服务", status: "2" },
                { title: "服务中", status: "6" },
                { title: "已完成", status: "10" },
            ],
            status: "0",
            page: 1,
            total: 0,
            list: [],
        };
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },
    onShow() {
        this.onRefresh();
    },
    methods: {
        /**
         * 切换订单状态
         */
        onTab(index) {
            this.status = this.tab_list[index].status;
            this.onRefresh();
        },
        /**
         * 取消订单
         */
        onCancelOrder(item) {
            this.$filters.onCancelOrder(item, () => {
                this.list.forEach((subItem, index) => {
                    if (item.id === subItem.id) {
                        this.list[index].status = "-1";
                        this.list[index].status_text = "已取消";
                    }
                });
            });
        },
        /**
         * 删除订单
         */
        onDeleteOrder(item) {
            this.$filters.onDeleteOrder(item, () => {
                this.list.forEach((subItem, index) => {
                    if (item.id === subItem.id) {
                        this.list.splice(index, 1);
                    }
                });
            });
        },
        /**
         * 详情
         */
        onDetail(item) {
            if (item.status == 9) return;
            if (item.is_add || item.is_upgrade) {
                uni.navigateTo({
                    url: `/subPages/technician/recruit/upOrderDetail?order_id=${item.id}`,
                });
                return;
            }
            uni.navigateTo({
                url: `/subPages/technician/order/orderDetails?order_id=${item.id}`,
            });
        },
        /**
         * 刷新
         */
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.getData();
        },
        /**
         * 网络请求
         */
        getData() {
            getOrderList(this.status, this.page).then((res) => {
                const list = res.data.data;
                this.total = res.data.total;
                if (this.page === 1) {
                    this.list = list;
                } else {
                    this.list = this.list.concat(list);
                }
            });
        },
        // 申请退款
        onApplyRefund(id) {
            uni.navigateTo({
                url: `/subPages/technician/recruit/refund?order_id=${id}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}

.wrap {
    --limit-num: 1;
    --bottom-height: 120rpx;

    .wrap-list {
        padding: 20rpx;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        .item {
            width: 100%;
            background-color: white;
            border-radius: 20rpx;
            overflow: hidden;
            padding: 0 20rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .item-one {
                width: 100%;
                height: 86rpx;
                border-bottom: 2rpx solid #ececec;

                .order-num {
                    color: $title-color;
                }
                .status {
                    color: $theme-color;
                }
            }

            .item-info {
                margin-top: 30rpx;
                width: 100%;
                overflow: hidden;

                .file {
                    width: 176rpx;
                    height: 176rpx;
                    border-radius: 20rpx;
                    overflow: hidden;
                }

                .info-right {
                    margin-left: 20rpx;
                    flex: 1;
                    overflow: hidden;

                    .title {
                        color: $title-color;
                    }
                    .people {
                        margin-top: 15rpx;
                        color: #a3a3a3;
                    }
                    .time {
                        margin-top: 15rpx;
                        color: #a3a3a3;
                    }
                    .service-time {
                        margin-top: 15rpx;
                        color: #a3a3a3;
                    }
                    .num {
                        color: $title-color;
                    }
                }
            }

            .item-bottom {
                margin-top: 30rpx;
                width: 100%;
                height: 90rpx;
                border-top: 2rpx solid #ececec;

                .total-price {
                    color: $title-color;
                    .price {
                        margin-left: 10rpx;
                        color: $price-color;
                    }
                }

                .btn-bg {
                    margin-left: 10rpx;
                    flex: 1;
                    overflow: hidden;
                }
            }
        }
    }
}
.errC {
    color: red !important;
}
.tags{
    background: $theme-color;
    color: white;
    padding: 5rpx 10rpx;
    font-size: 24rpx;
    border-radius: 10rpx;
    margin-left: 10rpx;
}
</style>
